<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="auto">
        <SideBar />
      </el-aside>
      <el-container :class="'main-container ' + isHide">
        <!-- 导航栏 -->
        <el-header height="84px" style="padding:0">
          <NavBar :key="$route.fullPath" />
        </el-header>
        <el-main>
          <div class="homeWelcome" v-if="this.$router.currentRoute.path=='/home'">
            欢迎来到教考系统后台
          </div>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import SideBar from "../components/home/SideBar";
import NavBar from "../components/home/NavBar";

export default {
  components: {
    SideBar,
    NavBar
  },
  name: "Home",
  data() {
    return {
      user: JSON.parse(window.sessionStorage.getItem("user"))
    }
  },
  computed: {
    isHide() {
      return this.$store.state.collapse ? "hideSideBar" : "";
    }
  },
  methods: {
  }
}
</script>
<style scoped>
.main-container {
  transition: margin-left 0.45s;
  margin-left: 210px;
  min-height: 100vh;
}
.hideSideBar {
  margin-left: 64px;
}
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.5s ease 0s;
}
.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.fade-transform-box {
  position: relative;
  top: 0px;
  bottom: 0px;
  width: 100%;
  overflow: hidden;
}
.homeWelcome {
  text-align: center;
  font-size: 30px;
  font-family: 华文行楷;
  color: #409eff;
  padding-top: 50px;
}
</style>

